<template>
    <el-dialog
            :visible.sync="dialogVisible"
            width="600px"
            :before-close="closeDialog"
            append-to-body
            title="新增岗位人员"
    >
    
        <div class="drawer-panel">
            <div class="search-item">
                <el-input
                        size="small"
                        v-model="queryParams.userAccount"
                        class="input-width clear-input"
                        suffix-icon="el-icon-search"
                        clearable
                        placeholder="请输入查询内容"
                ></el-input>
            </div>
            <div class="search-item">
                <el-button type="primary" size="small"  @click="queryUserList">搜索</el-button>
            </div>
        
            <div>
                <el-table
                    :data="tableData"
                    size="small"
                    border
                    :row-style="{height:'0'}"
                    style="width: 100%"
                    height="400"
                    @current-change="handleDataChange"
                    highlight-current-row
                    v-loading="loading">
                    <el-table-column
                            v-for="(item,index) in fields"
                            :key="index"
                            :label="item.label"
                            :prop="item.prop"
                            :min-width="item.width"
                            :fixed="item.fixed"
                    >
                    </el-table-column>
                </el-table>
                <div class="page-container" style="float:left;margin-top:10px">
                    <el-pagination
                            :page-sizes="[10, 20, 30, 50]"
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page.sync="nowPage"
                            :page-size="10"
                            layout="sizes,total, prev, pager, next"
                            :total="total">
                    </el-pagination>
                </div>
            </div>

            <div class="btn-group" style="margin-top:40px">
                <el-button type="text" size="small" plain @click="closeDialog">取消</el-button>
                <el-button type="primary"  size="small" :disabled="loading" @click="submit">确定</el-button>
            </div>
        </div>
        
    </el-dialog>
</template>

<script>

    import {addDeptPositionUser} from '@/api/dept';
    import {getUserList} from '@/api/user';
    export default {
        data(){
            return {
                labelPosition:'center',
                dialogVisible: false,
                total: 0,
                loading: false,
                nowPage:1,
                queryParams:{
                    pageNum:1,
                    pageSize:10,
                    userAccount:""
                },
                form: {
                    deptCode:"",
                    positionCode:"",
                    userAccount:"",
                },
                fields:[
                    {
                        label:"用户账号",
                        prop:"userAccount",
                        width:100
                    },{
                        label:"用户名称",
                        prop:"username",
                        width:80
                    },{
                        label:"用户昵称",
                        prop:"nickName",
                        width:80
                    },{
                        label:"所属部门",
                        prop:"deptNo",
                        width:80
                    },{
                        label:"岗位",
                        prop:"position",
                        width:100
                    }
                ],
                tableData: []
            }
        },
        created(){

        },
        methods:{
            showDialog(deptCode,positionCode){
                this.dialogVisible = true;
                this.form.deptCode = deptCode;
                this.form.positionCode = positionCode;
                this.queryUserList();
            },
             closeDialog(){
                this.form = {}
                this.dialogVisible = false
                this.loading = false
            },
            async queryUserList(){
                this.loading = true;
                let res = await getUserList(this.queryParams);
                let content = res.data;
                this.total = content.total;
                this.tableData = content.list;
                this.loading = false;
            },
            handleSizeChange(val) {
                this.queryParams.limit = val;
                this.queryUserList();
            },
            handleCurrentChange(val) {
                this.queryParams.pageNum = val;
                this.queryUserList();
            },
            handleDataChange(row){
                if(row == null){
                    return;
                }
                this.form.userAccount = row.userAccount;
            },
            async submit(){
                try{
                    this.loading = true
                    let res = await addDeptPositionUser(this.form);
                    if(res.status == '200'){
                        this.$message.success('添加成功')
                        this.closeDialog()
                        this.$emit('success')
                    }else{
                        this.$message.error(res.message)
                        this.loading = false
                    }
                }catch{
                    this.loading = false
                }
            }
        }
    }
</script>
<style lang="scss" scoped>
    .drawer-panel{
        padding-left: 20px;
        padding-right: 20px;
    }
    .btn-group{
        display: flex;
        justify-content: right;
        .el-button{
            width: 50px;
        }
    }
    .el-form-item{
        height: 40px;
    }
     .search-item{
        float: left;
        margin: 0 20px 20px 0;
        span{
            color: #606266;
            font-size: 14px;
            margin-right: 0px;
        }
    }
</style>